<template>
  <div class="variablesTable">
    <a-table :columns="columns" :data-source="dataList" :pagination="pagination" @change="change">
      <template #bodyCell="{ column, text, record }">
        <template v-if="['name', 'role', 'type', 'units'].includes(column.dataIndex)">
          <div>
            <a-input
              v-if="editableData[record.columnNumber]"
              v-model:value="editableData[record.columnNumber][column.dataIndex]"
              style="margin: -5px 0"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template v-if="['missing'].includes(column.dataIndex)">
          <div>
            <a-select
              v-if="editableData[record.columnNumber]"
              ref="select"
              v-model:value="editableData[record.columnNumber][column.dataIndex]"
              style="margin: -5px 0"
            >
              <a-select-option value="yes">yes</a-select-option>
              <a-select-option value="no">no</a-select-option>
            </a-select>
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template v-if="['description'].includes(column.dataIndex)">
          <div>
            <a-textarea
              :auto-size="{ minRows: 2, maxRows: 5 }"
              allow-clear
              v-if="editableData[record.columnNumber]"
              v-model:value="editableData[record.columnNumber][column.dataIndex]"
              style="margin: -5px 0"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations" v-if="showOp">
          <span v-if="editableData[record.columnNumber]">
            <a-typography-link @click="save(record.columnNumber)">Save</a-typography-link>
            <div/>
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.columnNumber)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
            <span v-else>
            <a @click="edit(record.columnNumber)">Edit</a>
          </span>
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash-es'
import { reactive, ref } from 'vue'
import type { UnwrapRef } from 'vue'
import { updateFileVariablesUsingPost } from '@/api/fileVariablesController.ts'
import { editFileUsingPost } from '@/api/fileController.ts'
import { message } from 'ant-design-vue'

interface Props {
  dataList?: API.FileVariablesVO[]
  columns?: []
  loading?: boolean
  showOp?: boolean
  onEdit?: () => void
  pagination?: () => void
  change?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
  showOp: false,
})



// const dataSource = ref(data);
const editableData: UnwrapRef<Record<number, API.FileVariablesUpdateRequest>> = reactive({})

const edit = (columnNumber: number) => {
  editableData[columnNumber] = cloneDeep(
    props.dataList.filter((item) => columnNumber === item.columnNumber)[0],
  )
}
const save = async (columnNumber: number) => {
  console.log( editableData[columnNumber])

  const res = await updateFileVariablesUsingPost({
    ...editableData[columnNumber]
  })
  // 操作成功
  if (res.data.code === 0 && res.data.data) {
    message.success('更新成功')
    props.onEdit()
  } else {
    message.error('更新失败，' + res.data.message)
  }

  delete editableData[columnNumber]
}
const cancel = (columnNumber: number) => {
  delete editableData[columnNumber]
}
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
.variablesTable {
  width: 100%;
}
</style>
